<template>
    <h2>窗口退费</h2>
    <h1>精准搜索</h1>
    <el-row>
        <el-col :span="4">
            <el-input v-model="query.caseNumber" placeholder="请输入病历号"></el-input>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="4">
            <el-input v-model="query.realName" placeholder="请输入姓名"></el-input>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="2">
            <el-button @click="getByPage">搜索</el-button>
        </el-col>
        <el-col :span="2">
            <el-button @click="resetF">重置</el-button>
        </el-col>
    </el-row>

    <h1>按条件筛选</h1>
    <el-row>
        <el-col :span="4">
            <el-select clearable v-model="query.id" placeholder="消费项目">
                <el-option v-for="item in itemList" :key="item.id" :label="item.costname" :value="item.id" />
            </el-select>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="3">
            <el-date-picker v-model="query.createtime" type="date" value-format="YYYY-MM-DD" placeholder="开立时间" />
        </el-col>
        <el-col :span="4"></el-col>
        <el-col :span="4">
            <!-- 1-已挂号 2-医生接诊 3-看诊结束 4-已退号 -->
            <el-select placeholder="支付状态" v-model="query.state" clearable>
                <el-option label="支付状态" :value="null"></el-option>
                <el-option label="已支付" :value="1"></el-option>
                <el-option label="未支付" :value="0"></el-option>
            </el-select>
        </el-col>

        <el-col :span="1"></el-col>
        <el-col :span="2">
            <el-button @click="getByPage">查询</el-button>
        </el-col>
        <el-col :span="2">
            <el-button @click="resetS">重置</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-table :data="pb.records" stripe border @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="register.caseNumber" label="病历号" width="100" />
                <el-table-column prop="register.realName" label="姓名" />
                <el-table-column prop="costname" label="消费名称" width="180" />
                <el-table-column prop="costprice" label="单价" width="60" />
                <el-table-column prop="number" label="数量" width="60" />
                <el-table-column label="状态" width="70">
                    <template #default="{ row }">
                        <span v-if="row.state == 0">未支付</span>
                        <span v-else-if="row.state == 1">已支付</span>
                    </template>
                </el-table-column>
                <el-table-column label="结算类别" width="120">
                    <template #default="{ row }">
                        <span v-if="row.settleCategoryId == 1">自费</span>
                        <span v-else-if="row.settleCategoryId == 2">市医保</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createtime" label="创建时间" />
                <el-table-column label="操作" width="140px">
                    <template #default="scope">
                        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <!-- 分页组件 -->
    <el-row>
        <el-col :span="6"></el-col>
        <el-col :span="12">
            <el-pagination v-model:current-page="query.current" v-model:page-size="query.size"
                :page-sizes="[5, 8, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pb.total"
                @size-change="getByPage" @current-change="getByPage" />
        </el-col>
    </el-row>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import httpRequest from '../../common/index.js';
import { onMounted, ref, getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

//费用记录删除
const handleDelete = (id) => {
    console.log('删除：id----', id);
    ElMessageBox.confirm(
        '您确定要删除该费用记录信息吗？',
        '删除提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //确定删除
            proxy.$axios({
                method: 'delete',
                url: '/cost/del/' + id
            }).then(res => {
                let resultBean = res.data;
                if (resultBean.code == 200) {
                    ElMessage.success('删除成功');
                    getByPage();
                } else {
                    ElMessage.error(resultBean.msg);
                }
            })

        })
        .catch(() => {
            ElMessage.info('取消删除');
        })
}
const query = ref({
    current: 1,
    size: 5,
    caseNumber: '',
    realName: '',
    state: null,
    createtime: '',
    id: ''
})

const pb = ref({
    total: 0,
    pages: 0,
    records: []
});

const itemList = ref([]);

//查询需要进行的检查  状态是已缴费的
const getByPage = () => {
    httpRequest(
        proxy,
        'post',
        '/cost/page',
        query.value,
        resultBean => {
            pb.value = resultBean.data;
            pb.value.records.forEach(record => {
                record.createtime = record.createtime.substring(0, 10);
            })
        }
    )
}

const getItem = () => {
    httpRequest(
        proxy,
        'post',
        '/cost/page',
        query.value,
        resultBean => {
            itemList.value = resultBean.data.records;
        }
    )

}

//重置搜索条件
const resetF = () => {
    query.value = {
        current: 1,
        size: 5,
        caseNumber: '',
        realName: ''
    }
}

//重置查询条件
const resetS = () => {
    query.value = {
        current: 1,
        size: 5,
        state: null,
        createtime: '',
        costname: ''
    }
}

//选中项的id集合
let selectOptions = ref([]);

//表格中多选框选中或取消时会触发  也就是选中项变化
const handleSelectionChange = (newSelection) => {
    console.log('选中项改变', newSelection);
    selectOptions.value = []; //清空
    newSelection.forEach((selOp) => {
        console.log(selOp);
        selectOptions.value.push(selOp);
    });
}

onMounted(() => {
    getByPage();
    getItem();
})

</script>

<style></style>